<!--
 * @Descripttion: 设备关联任务
 * @version: 
 * @Author: ye_zhiguo
 * @Date: 2021-08-18 11:03:33
 * @LastEditTime: 2021-08-21 16:09:12
-->
<template>
    <div id="deviceContact">
        <!-- <van-nav-bar  title="关联任务" left-arrow @click-left="back" /> -->
        <Theader title="关联任务" :headerStyle="{color:'#333',backgroundColor: '#fff'}" :textStyle="{color:'#333'}"
            :titleStyle="{color:'#333'}">
            <template slot="header_arrow">
                <van-icon size="17" name="arrow-left" @click="back" />
            </template>
        </Theader>
        <van-tabs v-model="activeName">
            <van-tab title="周期巡视" name="a" badge="17"></van-tab>
            <van-tab title="特殊巡视" name="b"></van-tab>
            <van-tab title="检测记录" name="c" badge="99+"></van-tab>
            <van-tab title="运维计划" name="d"></van-tab>
        </van-tabs>

        <!-- 周期巡视 -->
        <div class="out-main" v-show="activeName == 'a' ">
            <div class="in-main" v-for="(item,i) in inspectionTourList" :key="i">
                <div class="dynamicText padding-bottom">
                    <span class="green-text">「{{item.statue}}」</span>
                    <span>{{item.recordType}}</span>
                </div>
                <div class="staticText" style="padding-bottom:0.65rem;">
                    <span>{{item.subMsg}}</span>
                </div>
                <div class="staticText">
                    <span>巡视人：</span>
                    <span>{{item.tour}}</span>
                </div>
                <div class="specialText">
                    <img src="../../images/image087-tourTime.png" class="icon-box">
                    <span>巡视计划时间：</span>
                    <span>{{item.tourPlanTime}}</span>
                </div>
            </div>
        </div>
        <div class="out-main" v-show="activeName == 'b' ">
        </div>

        <!-- 检测记录 -->
        <div class="out-main" v-show="activeName == 'c' ">
            <div class="in-main" v-for="(item,i) in checkRecordList" :key="i">
                <div class="dynamicText padding-bottom">
                    <span>{{item.record}}</span>
                </div>
                <div class="staticText">
                    <span>{{item.subMsg}}</span>
                </div>
                <div class="specialText">
                    <img src="../../images/image087-tourTime.png" class="icon-box">
                    <span>工作计划时间：</span>
                    <span>{{item.startTime}}</span>
                    <span>~</span>
                    <span>{{item.overTime}}</span>
                </div>
            </div>
        </div>

        <!-- 运维计划 -->
        <div class="out-main" v-show="activeName == 'd' ">
            <div class="in-main" v-for="(item,i) in pmPlanList" :key="i">
                <div class="dynamicText padding-bottom">
                    <span class="green-text">「{{item.statue}}」</span>
                    <span>{{item.record}}</span>
                </div>
                <div class="staticText">
                    <span>{{item.subMsg}}</span>
                </div>
                <div class="specialText">
                    <img src="../../images/image087-tourTime.png" class="icon-box">
                    <span>工作计划时间：</span>
                    <span>{{item.startTime}}</span>
                    <span>~</span>
                    <span>{{item.overTime}}</span>
                </div>
            </div>
        </div>
    </div>
</template>

<script>

    import Theader from "../component/header"
    export default {
        components: {
            Theader
        },
        data() {
            return {
                activeName: 'd',
                checkRecordList: [{
                    record: '开关柜局放监测',
                    subMsg: '交花园山变电站 交流110KV',
                    startTime: '2021/05/14 09:38',
                    overTime: '2021/05/14 09:38',
                }, {
                    record: '开关柜局放监测',
                    subMsg: '交花园山变电站 交流110KV',
                    startTime: '2021/05/14 09:38',
                    overTime: '2021/05/14 09:38',
                }, {
                    record: '开关柜局放监测',
                    subMsg: '交花园山变电站 交流110KV',
                    startTime: '2021/05/14 09:38',
                    overTime: '2021/05/14 09:38',
                }, {
                    record: '开关柜局放监测',
                    subMsg: '交花园山变电站 交流110KV',
                    startTime: '2021/05/14 09:38',
                    overTime: '2021/05/14 09:38',
                }],
                inspectionTourList: [{
                    statue: '待准备',
                    recordType: '花园山变电站熄灯巡视',
                    subMsg: '交花园山变电站 交流110KV',
                    tour: '唐晓东、迟长兴',
                    tourPlanTime: '2021/05/14 09:38',
                }, {
                    statue: '待执行',
                    recordType: '花园山变电站全面巡视',
                    subMsg: '交花园山变电站 交流110KV',
                    tour: '唐晓东、迟长兴',
                    tourPlanTime: '2021/05/14 09:38',
                }, {
                    statue: '待执行',
                    recordType: '花园山变电站例行巡视',
                    subMsg: '交花园山变电站 交流110KV',
                    tour: '唐晓东、迟长兴',
                    tourPlanTime: '2021/05/14 09:38',
                }],
                pmPlanList: [{
                    statue: '待执行',
                    record: '设备清扫记录',
                    subMsg: '交花园山变电站 交流110KV',
                    startTime: '2021/05/14 09:38',
                    overTime: '2021/05/14 09:38',
                }, {
                    statue: '待执行',
                    record: '防小动物措施记录',
                    subMsg: '交花园山变电站 交流110KV',
                    startTime: '2021/05/14 09:38',
                    overTime: '2021/05/14 09:38',
                }, {
                    statue: '待执行',
                    record: '设备清扫记录',
                    subMsg: '交花园山变电站 交流110KV',
                    startTime: '2021/05/14 09:38',
                    overTime: '2021/05/14 09:38',
                }, {
                    statue: '待执行',
                    record: '防小动物措施记录',
                    subMsg: '交花园山变电站 交流110KV',
                    startTime: '2021/05/14 09:38',
                    overTime: '2021/05/14 09:38',
                }]
            }
        },
        filters: {

        },
        methods: {
            /**
             * @description: 返回
             */
            back() {
                this.$router.go(-1)
            },
        }
    }
</script>

<style>
    #deviceContact .out-main {
        height: calc(100vh - 7rem);
        padding: 11px;
        background-color: #F5F6F7;
    }

    #deviceContact .in-main {
        padding: 10px;
        background-color: #fff;
        margin-bottom: 10px;
        border-radius: 5px;
    }

    #deviceContact .dynamicText {
        color: #333333;
        font-weight: bold;
        font-size: 0.9375rem;
    }

    #deviceContact .green-text {
        color: #0EB295;
    }

    #deviceContact .staticText {
        color: #666666;
        font-size: 0.8125rem;
        padding-bottom: 1.5rem;
    }

    #deviceContact .specialText {
        color: #333333;
        font-size: 0.8125rem;
    }

    #deviceContact .padding-bottom {
        padding-bottom: 0.65rem
    }

    #deviceContact .icon-box {
        height: 0.8125rem;
        width: 0.8125rem;
    }
</style>